<template>
	<view class="assistant-box" @click="toDetail">
		<view class="assistant-bg">
			<up-image :show-loading="true" :src="assistantInfo.avatar" width="327rpx" radius="16rpx"
				height="380rpx"></up-image>
			<view class="state-content ing flex-center" v-if="assistantInfo.in_service==1">
				<text class="text">忙碌中</text>
			</view>
			<view class="state-content signIng flex-center" v-else-if="assistantInfo.in_service==0">
				<text class="text">空闲中</text>
			</view>
		</view>
		<view class="assistant-info w100">
			<view class="info-top flex-row-center w100">
				<text class="name">{{assistantInfo.nickname}}</text>
				<template>
					<up-icon name="man" v-if="assistantInfo.gender==1" color="#2979ff" size="28rpx"></up-icon>
					<up-icon name="woman" v-if="assistantInfo.gender==2" color="#FFC0CB" size="28rpx"></up-icon>
				</template>
			</view>
			<view class="info-footer flex-row-center">
				<view class="distance flex-row-center">
					<up-icon name="map-fill" color="#A5A6A7" size="28rpx"></up-icon>
					<text class="text">{{assistantInfo.juli}}km</text>
				</view>
				<view class="reservation-btn flex-center">
					<text class="text">去预约</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		assistantStore
	} from '@/stores/assistant.js';
	const assistantInfoStore = assistantStore();
	const props = defineProps({
		assistantInfo: {
			default: {}
		}
	})
	const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
	const assistantInfo = ref(computed(() => props.assistantInfo));
	const toDetail = () => {
		allNotification([ 'assistantRefund', 'assistantAccept','newAssistant'],
			() => {}); //打开通知
		assistantInfoStore.setAssistantItem(assistantInfo.value);
		uni.navigateTo({
			url: '/page_assistant/views/assistantDetails?id=' + assistantInfo.value?.id
		})
	}
</script>

<style lang="scss" scoped>
	.assistant-box {
		background-color: #222528;
		border-radius: 18rpx;
		overflow: hidden;

		.assistant-bg {
			position: relative;
		}

		.state-content {
			border-radius: 0 16rpx 0 16rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 99;
			height: 42rpx;
			width: 100rpx;
			color: #fff;
			font-size: 22rpx;
		}

		.ing {
			background-color: #fa3534;
		}

		.signIng {
			background-color: #5ac725;
		}

		.sginOver {
			background-color: #f1a532;
		}

		.noStart {
			background: #3c9cff;
		}

		.over {
			background-color: #909399;
		}
	}

	.assistant-info {
		padding: 20rpx;

		.info-top {
			.name {
				max-width: 200rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: $name-color;
				font-size: 28rpx;
				font-weight: bold;
				margin-right: 12rpx;
			}
		}



		.info-footer {
			// justify-content: flex-end;
			justify-content: space-between;

			.distance {
				.text {
					font-size: 22rpx;
					color: $description-color;
					margin-left: 6rpx;
				}
			}
		}

		.reservation-btn {
			background: $btn-bg-color;
			padding: 0 18rpx;
			border-radius: 8rpx;
			height: 46rpx;
			margin-top: 12rpx;

			.text {
				font-size: 26rpx;
				font-weight: bold;
				color: $btn-text-color;
			}
		}
	}
</style>